<!DOCTYPE html>
<html>
<!-- Head -->
<head>
  <title>登录表单</title>
  <!-- Meta-Tags -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!-- //Meta-Tags -->
  <!-- Style -->
  <link rel="stylesheet" href="css/common.css" type="text/css" media="all">
  <link rel="stylesheet" type="text/css" href="./css/layer.css">
</head>
<!-- //Head -->
<!-- Body -->
<body>
  <h1>XBiaoShop</h1>
  <div class="container w3layouts agileits">
    <div class="login w3layouts agileits">
      <h2>欢 迎 登 录</h2>
      <form id="myForm" action="home.html" method="post" class="pr oh">
        <input type="text" Name="Userame" v-model="user.username" placeholder="用户名" required="">
        <input type="password" Name="Password" v-model="user.password" placeholder="密码" required="">
        <input type="text" Name="checkCode" v-model="code" placeholder="验证码" required="">
        <div class="imgCode" @click="refresh()">
          <img :src="render" alt="" width="80px">
        </div>
      </form>
      <ul class="tick w3layouts agileits">
        <li class="fl">
          <input type="checkbox" v-model="remberMe" id="brand1">
          <label for="brand1">
            <span></span>记住密码
          </label>
        </li>
        <li class="fr">
          <a href="changePwd.html">忘记密码</a>
        </li>
      </ul>
      <div class="send-button w3layouts agileits">
        <input type="submit" value="登 录" @click="login">
      </div>
      <a href="register.html">立即注册</a>
      <div class="social-icons w3layouts agileits">
        <p>- 其他方式登录 -</p>
        <ul>
          <li class="qq"><a href="toQQLogin"> <span class="icons w3layouts agileits"></span> <span
                class="text w3layouts agileits">QQ</span></a></li>
          <li class="weixin w3ls"><a href="WeChat/towx_login"> <span class="icons w3layouts"></span> <span
                class="text w3layouts agileits">微信</span></a></li>
          <li class="weibo aits"><a href="#"> <span class="icons agileits"></span> <span
                class="text w3layouts agileits">微博</span></a></li>
          <div class="clear"> </div>
        </ul>
      </div>
      <div class="clear"></div>
    </div>
    <div class="clear"></div>
  </div>
  <div class="footer w3layouts agileits">
    <p>Copyright &copy; 2020.XB All rights reserved.</p>
  </div>
</body>
<!-- //Body -->
<script src="js/jquery-2.2.3.min.js"></script>
<script src="vue/vue-2.6.11.js"></script>
<script src="vue/axios-0.19.2.min.js"></script>
<script src="vue/layer.js"></script>
<script>
  new Vue({
    el:'.container',
    data:{
      render: 'kaptcha/render',
      user:{
        username:'',
        password:''
      },
      code:'',
      remberMe:false
    },
    methods: {
      refresh: function () {
        this.render = this.render + "?" + new Date();
      },
      login: function () {
        if (this.user.username==''){
          layer.msg("用户名不能为空！！！")
        }else  if (this.user.password==''){
          layer.msg("密码不能为空！！！")
        } else  if (this.code==''){
          layer.msg("验证码不能为空！！！")
        }else {
          axios({
            url: `user/login/${this.remberMe}/${this.code}`,
            method: 'post',
            data: this.user
          }).then(response => {
            //不成功提示
            if (response.data.success) {
              //把登陆成功的用户存到session去
              let user = JSON.stringify(response.data.obj);
              console.log(user)
              sessionStorage.setItem("user", user);
              sessionStorage.setItem("showNum", 5);
              sessionStorage.setItem("typeId",0);
              location.href = 'home.html';
              // alert(response.data.msg)
              layer.msg("登陆成功")
            } else {
              //登陆失败
              layer.msg(response.data.msg);
              // alert(response.data.msg)
              //刷新验证码
              this.refresh();
            }
          }).catch(error => {
            layer.msg(error.message);
          })
        }
      },
    }
  });
</script>
<script>
  // $(function(){
  //   $(".send-button input").click(function(){
  //     $("#myForm").submit()
  //   })
  // })
</script>
</html>